<template>
  <van-popup
    class="debuggerPopup"
    v-model:show="props.show"
    round
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: 'calc(100vw - 20px)' }"
    @click-overlay="popupClose"
    @click-close-icon="popupClose"
  >
    <div class="debuggerPopup-bg items-center">
      <div class="box">
        <div class="box-title">上报信息</div>
        <!-- 输入框 -->
        <van-field
          class="box-input"
          type="textarea"
          v-model="pageData.input"
          rows="12"
          :maxlength="999999"
          center
          clearable
          placeholder="请输入要发送的信息(可不填)"
          label=""
        >
        </van-field>
        <!-- 确认 -->
        <div class="box-footer">
          <div class="box-footer-btn" @click.stop="confirm">发送</div>
        </div>
      </div>
      <!-- 关闭按钮 -->
      <img
        class="box-close"
        src="/image/pledge/close.svg"
        @click="popupClose"
      />
    </div>
  </van-popup>
</template>
<script setup lang="ts" name="debuggerPopup">
import { ref, reactive, onMounted, computed } from "vue";
import { debounce } from "@/utils";
import * as MITO from "@zhj1214/qdjk-web";

const props = withDefaults(
  defineProps<{
    show: boolean;
    text: string;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "refresh"]);

// 页面属性
const pageData = reactive({
  input: "",
});

onMounted(() => {});

// 关闭弹窗
const popupClose = () => {
  pageData.input = "";
  emit("update:show", false);
};

// 确认
const confirm = debounce(
  () => {
    MITO.log({
      message: { token: props.text, text: pageData.input },
      tag: "调试信息上报",
      level: "low",
    });

    popupClose();
  },
  2000,
  false
);
</script>
<style lang="scss" scoped>
.debuggerPopup {
  background-color: transparent;
  &-bg {
    background-color: transparent;
    justify-content: center;
    flex-direction: column;
  }
  .box {
    width: 100%;
    background-color: #fff;
    padding: 12 * 2px 20 * 2px;
    border-radius: 16 * 2px;
    overflow: hidden;
    &-title {
      padding-top: 10 * 2px;
      padding-bottom: 25 * 2px;
      color: #002853;
      text-align: center;
      font-size: 17 * 2px;
      font-weight: 590;
      &-desc {
        color: #141924;
        font-size: 11 * 2px;
        &-icon {
          margin-right: 4 * 2px;
          width: 7 * 2px;
          height: 7 * 2px;
        }

        span {
          margin-left: 4 * 2px;
          color: #ffb800;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }
    }
    &-input {
      font-size: 10 * 2px;
      font-weight: 590;
      color: #141924;
      background-color: #f4f5f7;
      border-radius: 24px;
      margin: 10 * 2px 0;
      &-btn {
        font-size: 15 * 2px;
        color: #ffb800;
        font-weight: 590;
      }
    }
    &-info {
      padding: 10 * 2px;
      border-radius: 12 * 2px;
      background: linear-gradient(180deg, #fff9e9 0%, #fff 86.67%);
      margin-bottom: 18 * 2px;
      &-title {
        color: #c37a25;
        font-size: 12 * 2px;
        margin-bottom: 5 * 2px;
      }
      &-desc {
        color: #999da7;
        font-size: 11 * 2px;
      }
    }
    &-fgx {
      position: relative;
      margin-left: -10%;
      background-color: rgba(0, 0, 0, 0.1);
      width: 120%;
      height: 2px;
    }
    &-footer {
      padding-top: 12 * 2px;
      &-btn {
        background-color: #ffb800;
        border-radius: 100px;
        padding: 9 * 2px 0;
        width: 100%;
        font-size: 15 * 2px;
        color: #fff;
        text-align: center;
        font-weight: 590;
        &-disabled {
          background-color: #eed389 !important;
        }
      }
    }
    &-close {
      margin-top: 25 * 2px;
      width: 30 * 2px;
      height: 30 * 2px;
    }
  }
}
</style>
